<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易播放器</title>
		<style>
			#v_div {
				position: absolute;
				left: 50%;
				width: 600px;
				height: 600px;
				margin-left: -400px;
				top: 50%;
				margin-top: -300px;
				text-align: center;
			}
			video {
				width: 800px;
			}
		</style>
	 </head>
	 <body>
		 <div id="v_div">
			 <video id="video" src="http://www.pzhuweb.cn/data/china.mp4"></video>
			进度条:<input type="range" min="0" max="100" value="0"/>
			 <span id="time">当前时间/总时间</span> <button id="con">播放</button>
		 </div>
		<script>
			video =document.getElementById("video");
			con =document.getElementById("con");
			video.addEventListener("loadeddata",init,false);
			video.addEventListener("timeupdate",updataTime,false);
			con.addEventListener("click",videoPlay,false);
			document.getElementsByTagName("input")[0].onchange =function(){
				video.currentTime =document.getElementsByTagName("input")[0].value/100*video.duration;
			}
			
		function init(){
				document.getElementById("time").innerHTML =asTime(video.currentTime) + "/" + asTime(video.duration);
			}
			
		function videoPlay(){
			if(video.paused){
				video.play();
				con.innerHTML ="暂停";
				} else {
				video.pause();
				con.innerHTML ="播放";
				}
			}
			
		function updataTime(){
				document.getElementById("time").innerHTML =asTime(video.currentTime) + "/" + asTime(video.duration);
				document.getElementsByTagName("input")[0].value = Math.floor(video.currentTime *100 /video.duration);
				
			}
			
		function asTime(t){
			t=Math.round(t);
			var min=Math.floor(t/60);
			var sec =t%60;
			if(min<10){
				min ="0"+min;
				}
				if(sec<10){
				sec= "0"+sec;
				}
			return min + ":" +sec;
			}
		</script>
	</body>
</html>
